<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div style="flex-direction: column;gap:10px" class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{edit_time_title}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="edit_time"
                  class="Required" 
                  @blur="Blur('edit_time')"
                  @focus="Focus('edit_time')"
                  v-model="data.edit_time"
                  value-format="timestamp"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
            <div v-if="!!reason_text" style="width:100%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{reason_text}}:
              </div>
              <div class="contant">
                <el-input
                  ref="reason"
                  @blur="handleBlur('reason',$event)"
                  @focus="handleFocus($event)"
                  class="Required"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.reason"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      dataArr:[],
      title:'',
      edit_time_title:'',
      reason_text:'',
      data:{
        edit_time:"",
        reason:"",
        status:'',
      },
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(dataArr,title) {
      this.dataArr=dataArr
      this.title=title
      if(title=='出库'){
        this.title=this.$t('ExpressCargoManagementLang.Outbound')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.Outbound_time')
        this.data.status=3
      }else if(title=='拒签'){
        this.title=this.$t('ExpressCargoManagementLang.denyVisa')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.denyVisa_time')
        this.reason_text=this.$t('ExpressCargoManagementLang.denyVisa_text')
        this.data.status=8
      }else if(title=='到货'){
        this.title=this.$t('ExpressCargoManagementLang.transfer')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.transfer_time')
        this.data.status=4
      }else if(title=='提货'){
        this.title=this.$t('ExpressCargoManagementLang.takeDelivery')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.takeDelivery_time')
        this.data.status=6
      }else if(title=='派送'){
        this.title=this.$t('ExpressCargoManagementLang.dispatch')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.dispatch_time')
        this.data.status=5
      }else if(title=='签收'){
        this.title=this.$t('ExpressCargoManagementLang.SignReceipt')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.SignReceipt_time')
        this.data.status=6
      }else if(title=='弃货'){
        this.title=this.$t('ExpressCargoManagementLang.AbandonedGoods')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.AbandonedGoods_time')
        this.reason_text=this.$t('ExpressCargoManagementLang.AbandonedGoods_text')
        this.data.status=10
      }
      this.data.edit_time=new Date().getTime()
      this.Visible = true;
    },
    // 提交修改
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.edit_time){
        this.$refs.edit_time.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!!this.reason_text&&!this.data.reason){
        this.$refs.reason.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type&&this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let str=this.dataArr.map((obj)=>{return ""+obj.package_sn}).join(",")
        let params = new FormData();
        params.append("package_sns", str);
        params.append("edit_time", this.data.edit_time/1000);
        if(!!this.reason_text){
          params.append("reason", this.data.reason);
        }
        params.append("status", this.data.status);
        this.$postForm("packageStatus", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.cancel()
            this.$message.success(res.msg);
            this.$emit("success");
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.data={
        edit_time:"",
        reason:"",
        status:'',
      } 
      this.dataArr=[]
      this.title=''
      this.edit_time_title=''
      this.reason_text=''
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      dom.style.border = "1px solid #E0E3E9";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      if (!this.data[name]) {
        dom.style.border = "1px solid red";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>